<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div style="height: 2000px"></div>
    <img
      data-src="https://images.unsplash.com/photo-1620476214170-1d8080f65cdb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3150&q=80"
      alt=""
    />

    <script>
      const img = document.querySelector('img')
      // 监听对象
      /*   const observer = new IntersectionObserver(function (entries) {
        console.log(entries[0].isIntersecting)
      }) */
      const observer = new IntersectionObserver(function ([
        { isIntersecting },
      ]) {
        // console.log(entries[0].isIntersecting)
        console.log(isIntersecting)
        // 如果观察到
        if (isIntersecting) {
          img.src = img.getAttribute('data-src')
          // 观察完之后 就不需要再观察了
          observer.unobserve(img)
        }
      })
      //观察
      observer.observe(img)
    </script>
  </body>
</html>
